﻿@model VendorReviewHelpfulnessModel
<div class="vendor-review-helpfulness d-inline-flex justify-content-end align-items-center">
    <span class="question">@T("Reviews.Helpfulness.WasHelpful?")</span>
    <span class="vote-options btn-group">
        <span id="vote-yes-@(Model.VendorReviewId)" class="btn btn-sm btn-outline vote"><b-icon variant="success" icon="hand-thumbs-up"></b-icon></span>
        <span id="vote-no-@(Model.VendorReviewId)" class="btn btn-sm btn-outline vote"><b-icon variant="danger" icon="hand-thumbs-down"></b-icon></span>
    </span>
    <span class="vote-stats">
        (<span id="helpfulness-vote-yes-@(Model.VendorReviewId)">@(Model.HelpfulYesTotal)</span>/<span id="helpfulness-vote-no-@(Model.VendorReviewId)">@(Model.HelpfulNoTotal)</span>)
    </span>

    <script asp-location="Footer">
            document.getElementById('vote-yes-@(Model.VendorReviewId)').addEventListener("click",function(e){
                setProductReviewHelpfulness@(Model.VendorReviewId)('true');
            });
            document.getElementById('vote-no-@(Model.VendorReviewId)').addEventListener("click",function(e){
                setProductReviewHelpfulness@(Model.VendorReviewId)('false');
            });

         function setProductReviewHelpfulness@(Model.VendorReviewId)(wasHelpful) {
                axios({
                    url: '@(Url.RouteUrl("SetVendorReviewHelpfulness"))',
                    method: 'post',
                    params: { "vendorReviewId": '@(Model.VendorReviewId)', "vendorId": '@(Model.VendorReviewId)' ,"washelpful": wasHelpful }
                })
                .then(function (response) {
                    document.getElementById("helpfulness-vote-yes-@(Model.VendorReviewId)").innerHTML = response.data.TotalYes
                    document.getElementById("helpfulness-vote-no-@(Model.VendorReviewId)").innerHTML = response.data.TotalNo;
                    new Vue({
                        el: ".modal-place",
                        methods: {
                            toast() {
                                this.$bvToast.toast(response.data.Result, {
                                    title: '@T("Reviews.Helpfulness.WasHelpful?")',
                                    variant: 'info',
                                    autoHideDelay: 3000,
                                    solid: true
                                })
                            }
                        },
                        mounted: function () {
                            this.toast();
                        }
                    });
                }).catch(function (error) {
                    alert(error);
                })
        }
    </script>
</div>